<template>
	<view>
		<view class="item" v-for="(item, index) in lists" :key="index">
			<view class="tag" v-if="tagType === 'index'">{{index < 9 ? '0' + (index + 1) : index + 1}}</view>
			<view class="tag" v-else>{{item[tag]}}</view>
			<image :src="imgSrc" v-if="imgSrc" class="top-img" @click="onImgClick(item)"></image>
			<image :src="item[itemIcon]" v-if="itemIcon" class="top-img"></image>
			<view class="msg-r" v-if="itemRight">
				<image :src="itemRight" mode="aspectFit" @click="onMsgImage('car', item)" v-if="itemRight != 'true' && !item.itemRightShow"></image>
				<view @click="onMsgImage('radius', item)">...</view>
			</view>
			<view class="msg-r check-box" v-if="itemCheck" @click="onCheck(index)">
				<image src="../../static/icon1.png" mode="aspectFit" v-if="!item.check"></image>
				<image src="../../static/icon1_act.png" mode="aspectFit" v-else></image>
			</view>
			<view class="title"></view>
			<view v-for="(row, idx) in rowList" :key="idx">
				<view class="item-row" v-if="isMsgShow || row.isShow">
					<view class="row-l">{{row.name}}</view>
					<view class="row-border"></view>
					<view class="row-r"
						:style="{
							'color': row.color && item.setColor
						}"
					>{{item[row.value] || item[row.value] == 0 ? item[row.value] : '暂无信息'}}<text v-if="row.unit && (item[row.value] || item[row.value] == 0)">{{row.unit}}</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props: {
			lists: Array,
			tag: String,
			rowList: Array,
			tagType: String,
			imgSrc: String,
			itemIcon: String,
			itemRight: String,
			itemCheck: {
				type: Boolean,
				default: false
			},
			isMsgShow: {
				type: Boolean,
				default: true
			}
		},
		methods: {
			onImgClick(item) {
				this.$emit('onImgClick', item)
			},
			onMsgImage(str, item) {
				this.$emit('onMsgImage', str, item)
			},
			onCheck(index) {
				this.$emit('onCheck', index)
			}
		}
	}
</script>

<style scoped>
	.item{
		padding: 0 24rpx;
		background: #FFFFFF;
		border: 1px solid #E5E5E6;
		border-radius: 12rpx;
		margin-bottom: 12rpx;
		position: relative;
	}
	.top-img{
		position: absolute;
		top: 25rpx;
		left: 170rpx;
		width: 40rpx;
		height: 40rpx;
	}
	.tag{
		position: absolute;
		top: 25rpx;
		left: 0;
		height: 40rpx;
		line-height: 40rpx;
		color: #fff;
		background: #3791E9;
		font-size: 24rpx;
		padding-left: 18rpx;
		padding-right: 24rpx;
		border-radius: 0 20rpx 20rpx 0;
	}
	.title{
		height: 50rpx;
	}
	.item-row{
		display: flex;
		padding: 36rpx 0;
		font-size: 26rpx;
		border-bottom: 1px solid #E8E8E9;
	}
	.item:last-child .item-row{
		border-bottom: none;
	}
	.row-l{
		height: 30rpx;
		padding-right: 36rpx;
		white-space: nowrap;
	}
	.row-border{
		width: 1px;
		min-width: 1px;
		height: 30rpx;
		background: #E4E4E4;
		margin-right: 36rpx;
	}
	.row-r{
		flex: 1;
		width: 0;
		word-break: break-all;
	}
	.msg-r{
		position: absolute;
		top: 25rpx;
		right: 20rpx;
		display: flex;
		align-items: center;
	}
	.msg-r image{
		width: 40rpx;
		height: 36rpx;
		margin-right: 28rpx;
	}
	.msg-r view{
		width: 40rpx;
		height: 36rpx;
	}
</style>
